<template>
    <div>
        <div>full name 1: {{ getFullName1() }}</div>
        <div>full name 2: {{ getFullName2 }}</div>
        <div>full name 2: {{ getFullName3('jsz') }}</div>
        <div @click="onAdd">num: {{ num }}</div>
    </div>
</template>

<script lang="ts">
export default {
    data: ()=>{
        return {
            firstName: "Mk",
            lastName: "json",
            num: 0
        }
    },
    methods: {
        getFullName1(){
            console.log("getFullName1");
            return this.firstName + this.lastName;
        },
        onAdd(){
            this.num++;
            console.log("onAdd")
        }
    },
    computed: {
        getFullName2(){
            console.log("getFullName2");
            return this.firstName + this.lastName;
        },
        getFullName3(){
            return (v:any)=>{
                console.log("getFullName3")
                return this.firstName + v;
            }
        }
    }
}
</script>